<template>
  <div v-if="isItemModalVisible" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeItemModal">&times;</span>
      <h2>添加物品信息</h2>
      <form @submit.prevent="submitItemInfo">
        <label for="itemType">物品种类:</label>
        <!-- 修改了输入框的样式 -->
        <input type="text" id="itemType" v-model="localItemInfo.type" required style="box-sizing: border-box;">
        <label for="itemName">物品名字:</label>
        <input type="text" id="itemName" v-model="localItemInfo.name" required style="box-sizing: border-box;">
        <label for="itemPrice">物品价格:</label>
        <input type="number" id="itemPrice" v-model="localItemInfo.price" required style="box-sizing: border-box;">
        <label for="itemLocation">物品位置:</label>
        <input type="text" id="itemLocation" v-model="localItemInfo.location" required style="box-sizing: border-box;">
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ItemModal',
  props: {
    isItemModalVisible: Boolean,
    itemInfo: Object
  },
  data() {
    return {
      // 创建一个本地数据副本
      localItemInfo: { ...this.itemInfo }
    };
  },
  methods: {
    closeItemModal() {
      this.$emit('closeItemModal');
    },
    submitItemInfo() {
      // 将本地数据副本通过自定义事件传递回父组件
      this.$emit('submitItemInfo', this.localItemInfo);
      this.closeItemModal();
    }
  }
};
</script>

<style scoped>
@import './ModalStyles.css';
</style>